<template>
  <FModal :header="header" @ok="close" width="900" ref="refFModal">
    <div class="user-element-task-history">

      <FSection title="节点信息" class="start-process-content-section">
        <div class="start-process-content-section">
          <div>
            <el-text truncated>
              节点执行方式:
              {{ taskExecuteWay }}
            </el-text>
          </div>

          <div>
            <el-text truncated>
              节点人员配置信息:
              {{ userConfigs }}
            </el-text>
          </div>

          <div>
            <el-text truncated>
              节点说明:
              {{ userTaskHistory.taskDefinition.desc }}
            </el-text>
          </div>

          <div>
            <el-text truncated>
              执行完成条件:
              {{ userTaskHistory.taskDefinition.executeCompleteThreshold }}%
              (当流程中审批人数量超过此百分比时流转)
            </el-text>
          </div>
        </div>
      </FSection>

      <FSection title="处理人意见" v-show="isNotEmpty(userTaskHistory.historys)"
                class="start-process-content-section">
        <div v-for="his in userTaskHistory.historys" class="flow-history-item-wrapper">
          <div class="flow-history-item-header">
            <div style="width: 350px; display: flex">
              <el-avatar size="small" icon="UserFilled"/>
              <el-text type="primary" style="margin-left: 10px">
                {{ his.realname }}
              </el-text>
              <el-text style="margin-left: 10px">{{ his.commentActionInfo }}</el-text>
              <el-text type="info" style="margin-left: 20px">{{ his.resolveTime }}</el-text>
            </div>

            <div style="flex: 1; text-align: right; padding-right: 20px">
              <el-text type="info">
                审批节点名称:
                {{ his.userTaskName }}
                <span v-show="his.notify">(知会)</span>
                <span v-show="his.fromCounterSign">(加签)</span>
              </el-text>
            </div>
          </div>

          <div class="flow-history-item-body">
            <el-text>
              <div v-html="his.comment"></div>
            </el-text>

            <div v-show="isNotEmpty(his.attachmentIds)">
              <el-divider style="margin-bottom: 10px" content-position="left">
                <el-text>附件区</el-text>
              </el-divider>

              <FUploader :enable="false"
                         :attachmentIds="his.attachmentIds"/>
            </div>
          </div>
        </div>
      </FSection>

      <FSection title="待审批" v-show="isNotEmpty(userTaskHistory.actives)"
                class="start-process-content-section">
        <div v-for="his in userTaskHistory.actives" class="flow-history-item-wrapper">
          <div class="flow-history-item-header">
            <div style="width: 350px; display: flex">
              <el-avatar size="small" icon="UserFilled"/>
              <el-text type="primary" style="margin-left: 10px">{{ his.realname }}</el-text>
              <el-text style="margin-left: 10px">{{ his.commentActionInfo }}</el-text>
              <el-text type="info" style="margin-left: 20px">{{ his.createTime }}</el-text>
            </div>

            <div style="flex: 1; text-align: right; padding-right: 20px">
              <el-text type="info">
                审批节点名称:
                {{ his.taskName }}
                <span v-show="his.notify">(知会)</span>
                <span v-show="his.fromCounterSign">(加签)</span>
              </el-text>
            </div>
          </div>
        </div>
      </FSection>
    </div>
  </FModal>
</template>
<script setup>
import FModal from '@/components/FModal/index.vue';
import {computed, reactive, ref} from 'vue';
import {getAction} from '@/request/BaseRequest';
import FSection from '@/components/FSection/index.vue';
import {findListTitle, isEmpty, isNotEmpty} from '@/utils/CommonUtils';
import FUploader from '@/components/FUploader/index.vue';
import {ElMessage} from 'element-plus';

const refFModal = ref(undefined);
const header = ref(undefined);
const userTaskHistory = reactive({
  taskDefinition: undefined,
  historys: [],
  actives: []
});
let timer = new Date().getTime();

function setData(processInstanceId, userTaskDefinitionId) {
  if (new Date().getTime() - timer < 200) {
    return;
  }
  timer = new Date().getTime();
  getAction('/flow/loadUserTaskHistory', {processInstanceId, userTaskDefinitionId}).then(data => {
    if (data.success) {
      let result = data.result;
      setUserTaskHistory(result);
    }
  });
}

function setUserTaskHistory(result) {
  // if (isEmpty(result.historys) && isEmpty(result.actives)) {
  //   ElMessage.info('当前节点没有审批信息');
  //   return;
  // }
  userTaskHistory.taskDefinition = result.taskDefinition;
  userTaskHistory.historys = result.historys;
  userTaskHistory.actives = result.actives;
  header.value = `节点名称: ${userTaskHistory.taskDefinition.name}`;
  refFModal.value.open();
}

const executeWays = [
  {id: 'single', title: '单人/竞争审批'},
  {id: 'multiple-serial', title: '多人依次审批'},
  {id: 'multiple-paralle', title: '多人同时审批'},
  {id: 'all', title: '全体同时审批'},
];

const taskExecuteWay = computed(() => {
  let list = [...userTaskHistory.historys, ...userTaskHistory.actives];
  if (isEmpty(list)) {
    return '';
  }
  let item = list[0];
  return findListTitle(item.executeWay, executeWays);
});

const userConfigs = computed(() => {
  try {
    if(isEmpty(userTaskHistory) || isEmpty(userTaskHistory.taskDefinition)) return;
    let userConfigs = userTaskHistory.taskDefinition.userConfigs;
    userConfigs = userConfigs.map(u => u.configName);
    return userConfigs.toString();
  } catch (e) {
    console.error(e);
  }
});

function close() {
  refFModal.value.close();
}

defineExpose({
  setData,
});
</script>

<style>
.f-modal-small-body .user-element-task-history {
  height: 500px;
  overflow: auto;
}

.f-modal-fullscreen-body .user-element-task-history {
  height: 100%;
  overflow: auto;
}
</style>
